<template>
    <UxDialog class="necklabel_dialog" :visible="visible" title="" @close="visible = false">
        <div class="necklabel-dialog">
            <h3>Want More Freedom to Design Your Branded Neck Label?</h3>
            <h4>Go to <strong>Dashboard - Branding</strong> to unleash your creativity</h4>
            <figure>
                <img src="https://img.podpartner.com/static/images-20230202/branding-freedom.png" alt="" />
            </figure>
            <p>
                Here you can decide how to arrange all the elements and
                impress your customers with delicate details.
            </p>

            <h6>
                <i class="iconfont icon-xiangqing2"></i>Your current design
                will <strong>not be saved</strong> if you choose to create
                your branded neck label now.
            </h6>

            <fieldset>
                <button @click="visible = false">Cancel</button>
                <button @click="createNecklabel()" type="primary">Create neck label</button>
            </fieldset>
        </div>
    </UxDialog>
</template>

<script>
export default {
    props: {
        value: { type: Boolean, default: false }
    },
    data () {
        return {};
    },

    computed: {
        visible: {
            get () {
                return this.value
            },
            set (val) {
                this.$emit('input', val)
            }
        }
    },

    methods: {
        // 登录完成后，跳到品牌领标
        createNecklabel () {
            if (this.logined) {
                this.$router.push("/branding/necklabel");
            } else {
                this.$emit("global:userSignup", (e) =>
                    this.$router.push("/branding/necklabel")
                );
            }
        },
    },
};
</script>
<style lang="scss" scoped>
.necklabel-dialog {
    width: 720px;
    box-sizing: border-box;
    padding: 40px 60px 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    h3 {
        font-size: 18px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #000000;
        line-height: 20px;
        text-align: center;
    }
    h4 {
        margin-top: 10px;
        font-size: 14px;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        color: #000000;
        line-height: 20px;
        text-align: center;
    }
    figure {
        width: 100%;
        border-radius: 8px;
        overflow: hidden;
        margin-top: 24px;
        background-color: rgb(246, 246, 246);
        position: relative;
        &::before {
            content: '';
            display: block;
            padding-bottom: 42%;
        }
        img {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }
    }

    & > p {
        margin-top: 12px;
        font-size: 14px;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        color: #000000;
        line-height: 20px;
    }

    h6 {
        margin-top: 32px;
        width: 100%;
        font-size: 14px;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        color: #f44336;
        line-height: 14px;
        i {
            width: 14px;
            height: 14px;
            line-height: 14px;
            color: #f44336;
            margin-right: 6px;
            font-size: 14px;
        }
    }

    fieldset {
        display: flex;
        margin-top: 32px;
        button {
            width: 220px;
            margin: 0 4px;
        }
    }
}
</style>
